/**
 * Created by guzhenfu on 17/5/11.
 */

import React from 'react'
import {
    StyleSheet,
    View,
    Text, ToastAndroid,
    TouchableHighlight,
    Image,
    PixelRatio,
    ScrollView,
    FlatList,
    Dimensions,
    TouchableOpacity

} from 'react-native'


import Video from 'react-native-video'
import jsons from './video.json'
var Width = Dimensions.get('window').width; //屏宽
var Height = Dimensions.get('window').height; //屏宽
export default class HomeNew extends React.Component {
    _flatList;
    constructor(props) {
        super(props);
        this.state = {
            layout: 'list',
            text: '',
            dataList: jsons.VAP4BFR16,
            imagelist: null,
        }
    }

    sleep = (time) => {
        return new Promise(resolve => {
            setTimeout(() => resolve(), time);
        })
    };


    componentDidMount() {

        // console.log(jsons)
        // let url = "http://c.3g.163.com/nc/video/list/VAP4BFR16/y/0-10.html";
        // fetch(url, {
        //     headers: {

        //         'Content-Type': 'application/json',

        //         'Accept': 'application/json'

        //     }
        // })
        //     .then((response) => response.json())
        //     .then((json) => {

        //         // dataList = json.data.map(
        //         //     (info) => {
        //         //         return {
        //         //             id: info.id,
        //         //             imageUrl: info.squareimgurl,
        //         //             title: info.mname,
        //         //             subtitle: `[${info.range}]${info.title}`,
        //         //             price: info.price
        //         //         }
        //         //     }
        //         // )
        //         // var data = json.VAP4BFR16[0]
        //         console.log("视频           " + JSON.stringify(json.VAP4BFR16[0]))

        //         // var data = []; 
        //         // for(var i =0; i<json.VAP4BFR16.length;i++){

        //         //     data.push(json.VAP4BFR16[i])
        //         //     data.push(json.VAP4BFR16[i])
        //         // }
        //         // console.log(data)


        //         this.setState({
        //             //dataSource: json.VAP4BFR16,
        //             refreshing: false,
        //             dataList: json.VAP4BFR16,
        //             imagelist:json.VAP4BFR16.cover
        //         })

        //         // console.log(json.data[0].range);
        //     })
        //     .catch((error) => {
        //         console.log(error)
        //         this.setState({ refreshing: false })
        //     })
    }
    _inRrenderItem = (item, index) => {
        {
            console.log(item.item)
        }
        return (

            <Image source={{ uri: item.item }} style={{ width: 375, height: 200 }} ></Image>


        )
    }

    /**
     * 渲染item 布局
     * @param item
     * @returns {XML}
     * @private
     */
    _renderItem = (item, index) => {
        {

            console.log(item.item)
        }

        if (item.item.mp4_url === null) {
            return (
                <View style={{ flex: 1 }}>
                <View style={styles.head}>
                        <Image style={styles.headimg} source={require('../../image/one.png')}></Image>
                        <TouchableOpacity style={styles.loginStyle} onPress={() => { this._onPress(PersonData) }}>
                            <View style={styles.LoginSuccess}>
                                <Text style={styles.nameStyles}>
                                    BW160923_abc
                        </Text>
                                <Text style={styles.phoneStyles}>
                                    182××××1776
                        </Text>
                            </View>
                            <Image style={styles.arrow} source={{ uri: 'forward' }} />
                        </TouchableOpacity>

                    </View>

                    <View style={{ flex: 1, backgroundColor: 'white' }}>
                        <FlatList
                            ref='flatlist1'
                            renderItem={this._inRrenderItem}
                            keyExtractor={this.keyExtractor1}
                            data={item.item.cover}
                            horizontal={true}
                        >
                        </FlatList>


                    </View>
                    <Text>

                    这瓶红酒真不错，真的值得推荐，这瓶红酒真不错，真的值得推荐，这瓶红酒真不错，真的值得推荐，这瓶红酒真不错，真的值得推荐
                    </Text>
                    <View style = {{width:375,height:30,backgroundColor:'white'}}></View>
                </View>
            )
        }
        return (
            <View style={{ flex: 1 }}>

                <View style={{ flex: 1, backgroundColor: 'white' }}>
                    <View style={styles.head}>
                        <Image style={styles.headimg} source={require('../../image/one.png')}></Image>
                        <TouchableOpacity style={styles.loginStyle} onPress={() => { this._onPress(PersonData) }}>
                            <View style={styles.LoginSuccess}>
                                <Text style={styles.nameStyles}>
                                    BW160923_abc
                        </Text>
                                <Text style={styles.phoneStyles}>
                                    182××××1776
                        </Text>
                            </View>
                            <Image style={styles.arrow} source={{ uri: 'forward' }} />
                        </TouchableOpacity>

                    </View>
                    {/* <FlatList
                        ref='flatlist1'

                        renderItem={this._inRrenderItem}
                        keyExtractor={this.keyExtractor1}
                        data={item.item.cover}
                        horizontal={true}
                    >


                    </FlatList> */}
                    <Video
                        ref="videoPlayer"
                        //source={{uri:'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4'}} //视频播放地址
                        source={{ uri: item.item.mp4_url }}
                        //source={require('./1.mp4')}
                        style={styles.video}      //样式
                        rate={0}                   // 控制暂停/播放，0 代表暂停
                        volume={1.0}                 // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
                        muted={false}                //true代表静音，默认为false.
                        paused={false}               // Pauses playback entirely.
                        resizeMode="cover"           // 视频的自适应伸缩铺放行为，
                        repeat={true}                // 是否重复播放


                    />
                    <Text>

                    这瓶红酒真不错，真的值得推荐，这瓶红酒真不错，真的值得推荐，这瓶红酒真不错，真的值得推荐，这瓶红酒真不错，真的值得推荐
                    </Text>

                </View>
                <View style = {{width:375,height:30,backgroundColor:'white'}}></View>
            </View>
        )
        // }
        // else if (item.item.mp4_url !== null || item.item.cover === null) {
        //     return (
        //         <View style={{ flex: 1 }}>

        //             <View style={{ flex: 1, backgroundColor: 'white' }}>

        //                 <TouchableHighlight onPress={() => alert('gggg')}>
        //                     <FlatList
        //                         ref='flatlist'

        //                         renderItem={this._renderItem}
        //                         keyExtractor={this.keyExtractor}
        //                         data={this.state.dataList}
        //                         horizontal={true}
        //                     >
        //                         <Text>11111</Text>
        //                         <Text>22222</Text>
        //                         <Text>33333</Text>

        //                     </FlatList>
        //                     <Video
        //                         ref="videoPlayer"
        //                         //source={{uri:'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4'}} //视频播放地址
        //                         source={{ uri: item.item.mp4_url }}
        //                         //source={require('./1.mp4')}
        //                         style={styles.video}      //样式
        //                         rate={0}                   // 控制暂停/播放，0 代表暂停
        //                         volume={1.0}                 // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
        //                         muted={false}                //true代表静音，默认为false.
        //                         paused={false}               // Pauses playback entirely.
        //                         resizeMode="cover"           // 视频的自适应伸缩铺放行为，
        //                         repeat={true}                // 是否重复播放


        //                     />
        //                 </TouchableHighlight>
        //             </View>
        //         </View>
        //     )
        // } else {

        //     return (
        //         <View style={{ flex: 1 }}>

        //             <View style={{ flex: 1, backgroundColor: 'white' }}>

        //                 <TouchableHighlight onPress={() => alert('gggg')}>
        //                     <FlatList
        //                         ref='flatlist'

        //                         renderItem={this._renderItem}
        //                         keyExtractor={this.keyExtractor}
        //                         data={this.state.dataList}
        //                         horizontal={true}
        //                     >
        //                         <Text>11111</Text>
        //                         <Text>22222</Text>
        //                         <Text>33333</Text>

        //                     </FlatList>
        //                     <Video
        //                         ref="videoPlayer"
        //                         //source={{uri:'http://qiubai-video.qiushibaike.com/A14EXG7JQ53PYURP.mp4'}} //视频播放地址
        //                         source={{ uri: item.item.mp4_url }}
        //                         //source={require('./1.mp4')}
        //                         style={styles.video}      //样式
        //                         rate={0}                   // 控制暂停/播放，0 代表暂停
        //                         volume={1.0}                 // 声音的放大倍数，0 代表没有声音，就是静音muted, 1 代表正常音量 normal，更大的数字表示放大的倍数
        //                         muted={false}                //true代表静音，默认为false.
        //                         paused={false}               // Pauses playback entirely.
        //                         resizeMode="cover"           // 视频的自适应伸缩铺放行为，
        //                         repeat={true}                // 是否重复播放


        //                     />
        //                 </TouchableHighlight>
        //             </View>
        //         </View>
        //     )
        // }
    }

    // _onPress = (item) =>{
    //     this.state.selectItem.splice(this.state.selectItem.findIndex(function (x) {
    //         console.log(x)
    //         return x === item.name;
    //     }))
    // }

    keyExtractor = (item, index) => item.key;
    keyExtractor1 = (item, index) => item.key;
    render() {

        {
            console.log(this.state.dataList)
        }
        return (
            <View style={styles.container}>

                <FlatList
                    ref='flatlist'
                    extraData={this.state}
                    renderItem={this._renderItem}
                    keyExtractor={this.keyExtractor}
                    
                    //numColumns ={3}
                    //columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:20}}

                    //horizontal={true}

                    //getItemLayout={(data,index)=>(
                    //{length: ITEM_HEIGHT, offset: (ITEM_HEIGHT+2) * index, index}
                    //)}

                    //onEndReachedThreshold={5}
                    //onEndReached={(info)=>{
                    //console.warn(info.distanceFromEnd);
                    //}}

                    //onViewableItemsChanged={(info)=>{
                    //console.warn(info);
                    //}}
                    data={this.state.dataList}>
                </FlatList>
                

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    listWrapper: {
        width: '100%',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-around',
        height: 100,
        borderTopWidth: 1,
        borderTopColor: '#EBEBEB',
    },
    listItemWrapper: {
        width: '25%',
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10
    },
    listItemTextBlue: {
        color: '#45a162',
    },
    listItemTextRed: {
        color: '#c84a4a',
    },
    container1: {
        flexDirection: 'row',
        padding: 10,
        borderBottomWidth: 1 / PixelRatio.get(),
        borderColor: '#e0e0e0',
        backgroundColor: 'white',
    },
    icon: {
        width: 80,
        height: 80,
        borderRadius: 5,
    },
    rightContainer: {
        flex: 1,
        paddingLeft: 20,
        paddingRight: 10,
    },
    price: {
        color: '#06C1AE'
    },
    scrolviewStyle: {
        width: '100%',
        height: 200

    },
    video: {
        width: 400,
        height: 200,
        backgroundColor: '#0001'
    },
    head:{
        width:Width,
        height:50,
        flexDirection:'row',
        alignItems:'center',
        //backgroundColor: '#000',
    },headimg:{
        width:40,
        height:40,
        borderRadius:20,
        marginTop:0
    },LoginSuccess:{
        flex:1
    },middleTextStyles:{
        marginTop:7,
        fontSize:15,
        color:'#333333'
    },judgeStyles:{
        fontSize:12,
        color:'#999999',
        marginRight:10
    },nameStyles:{
        fontSize:15,
        color:'#666666'
    },phoneStyles:{
        fontSize:12,
        color:'#666666',


    }
});
